<template>
	<div class="sellhome">
		<SerachBar></SerachBar>
		<div class="sh_content_body">
			<div class="wrapper" ref="sellhome">
				<div class="content">
					<SellSwiper :swiper="sellhome.swarp"></SellSwiper>
					<SellTitle :stitle="sellhome.stitle"></SellTitle>
					<SellPromotion :spromotion="sellhome.spromotion"></SellPromotion>
					<SellClass :sclass="sellhome.sclass"></SellClass>
                    <SellLike :slikes="sellhome.slikes"></SellLike>
					<div class="aa"></div>
				</div>
			</div>
		</div>
		<FootBar></FootBar>
	</div>

</template>
<script>
import BScroll from "better-scroll";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

import SellSwiper from "./homeComponents/SellSwiper";
import SellTitle from "./homeComponents/SellTitle";
import SellPromotion from "./homeComponents/SellPromotion";
import SellClass from "./homeComponents/SellClass";
import SellLike from './homeComponents/SellLike';


export default {
    data() {
        return {};
    },

    components: {
        SellSwiper,
        SellTitle,
        SellPromotion,
        SellClass,
        SellLike
	},
	computed:{
		...mapState(["sellhome"])
	},
    methods: {
        getScroll() {
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.sellhome, {
                    click:true
                });
            });
		},
		...mapActions(["loadHomeData"])
    },
    mounted() {
		this.getScroll();
		this.loadHomeData();
    }
};
</script>

<style lang="less" scoped>
.sellhome {
    width: 100%;
    height: 100%;
    .sh_content_body {
        position: absolute;
        top: 100px;
        left: 0px;
        right: 0px;
        bottom: 100px;
        .wrapper {
            width: 100%;
            height: 100%;
            .content {
                .aa {
                    height: 500px;
                }
            }
        }
    }
}

</style>

